<template>
    <a-form ref='formRef' :model='formData'>
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label='名称' name='name' :rules="[{required : true, message : '请填写名称'}]">
            <a-input type='text' v-model:value='formData.name' />
        </a-form-item>
        <a-form-item label='编码' name='code' :rules="[{required : true, message : '请填写编码'}]">
            <a-input type='text' v-model:value='formData.code' />
        </a-form-item>
        <div style="display: flex; align-items: center;" v-for="(item, index) in formData.config">
            <div style="flex: 1;">
                <a-form-item label='名称' :name="['config', index, 'name']" :rules="[{required : true, message : '请填写名称'}]">
                    <a-input type='text' v-model:value='formData.config[index].name' />
                </a-form-item>
            </div>
            <div style="flex: 1;">
                <a-form-item style="flex: 1;" label='编码' :name="['config', index, 'code']" :rules="[{required : true, message : '请填写编码'}]">
                    <a-input type='text' v-model:value='formData.config[index].code' />
                </a-form-item>
            </div>
            <div style="flex: 1;">
                <a-form-item style="flex: 1;" label='类型' :name="['config', index, 'dataType']" :rules="[{required : true, message : '请选择类型'}]">
                    <a-select v-model:value="formData.config[index].dataType" style="width: 100%;">
                        <a-select-option value="text">文本</a-select-option>
                        <a-select-option value="number">数字</a-select-option>
                    </a-select>
                </a-form-item>
            </div>
            <a-form-item style="margin-left: 10px;"><MinusCircleOutlined style="cursor: pointer;" @click="removeItem(index)" /></a-form-item>
        </div>
        <a-form-item><a-button type="dashed" style="width: 100%" @click="addItem"><PlusOutlined />增加配置项</a-button></a-form-item>
        
    </a-form>
</template>

<script lang="ts" setup>
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
    import { saveApi } from '@/api/system/Config'
        import { ref } from 'vue';
import { Modal } from 'ant-design-vue';


    const props = defineProps<{
        row? : any;
    }>()


    const formRef = ref()

    
    const formData = ref<any>({
        id : 0,
        name : '',
        code : '',
        config : []
    })

    if(props.row) {
        formData.value.id = props.row.id
        formData.value.name = props.row.name
        formData.value.code = props.row.code
        formData.value.name = props.row.name


        if(props.row.config) {
            for(let k in props.row.config) {
                formData.value.config.push({code : k, name : props.row.config[k].name, dataType : props.row.config[k].dataType, value : props.row.config[k].value})
            }
        }
        
    }

    function addItem() {
        const last = formData.value.config[formData.value.config.length - 1]
        formData.value.config.push({name : '', code : '', dataType : '', sort : last ? last.sort + 1 : 0})
    }

    function removeItem(index:number) {
        Modal.confirm({
            title : '确定删除吗',
            onOk() {
                formData.value.config.splice(index, 1)
            }
        })
    }

    async function submit() {
        let params  = await formRef.value.validate()

        const config:any = {}

        params.config.forEach((item, index) => {
            config[item.code] = {...item}

            config[item.code].value = formData.value.config[index].value
        })

        params.config = config

        return saveApi(params)
    }



    defineExpose({
        submit
    })
</script>